<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ssss' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-alert
          title="添加商品信息"
          type="info"
          center
          show-icon
          :closable="false"
        >
        </el-alert>
        <el-steps :active="active" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <el-tabs :tab-position="tabPosition" style="height: 800px">
          <el-tab-pane label="基本信息">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width=""
              class="demo-ruleForm"
            >
              <el-form-item label="商品名称" prop="goods_name">
                <el-input v-model="ruleForm.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="goods_price">
                <el-input v-model="ruleForm.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="商品重量" prop="goods_weight">
                <el-input v-model="ruleForm.goods_weight"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" prop="goods_number">
                <el-input v-model="ruleForm.goods_number"></el-input>
              </el-form-item>
              <el-form-item label="商品分类" prop="value"> </el-form-item>
              <el-cascader
                v-model="ruleForm.value"
                :options="options"
                @change="handleChange"
                :props="{ value: 'cat_name', label: 'cat_name' }"
                children
              ></el-cascader>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="商品参数">配置管理</el-tab-pane>
          <el-tab-pane label="商品属性">角色管理</el-tab-pane>
          <el-tab-pane label="商品图片">定时任务补偿</el-tab-pane>
          <el-tab-pane label="商品内容">定时任务补偿</el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { huoQuGoodsAdd } from '@/api/goodsAdd'
export default {
  name: 'GoodsA',
  data () {
    return {
      options: [],
      active: 0,
      tabPosition: 'left',
      ruleForm: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        value: [],
      },
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' },
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
        ],
        value: [
          { required: true, message: '请选择商品分类', trigger: 'blur' },
        ],
      }
    }
  },
  created () {
    this.huoquAdd()
  },
  computed: {
  },
  methods: {
    handleChange (value) {
      console.log(value);
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    async huoquAdd () {
      const res = await huoQuGoodsAdd()
      console.log(res);
      this.options = res.data
      // console.log(this.list);
    }
  },
  next () {
    if (this.active++ > 2) this.active = 0;
  },

}

</script>
<style lang='less'  scoped>
.goods-ce {
  display: flex;
  .goods-tian {
    margin-left: 50px;
    margin-right: 600px;
  }
}
</style>
